<template>
	<view>
		<u-navbar placeholder fixed title="密码登录" :titleStyle="{fontWeight:'600',fontSize:'18px'}" leftIcon="arrow-left" a
			autoBack right-text="注册" @rightClick="toRegister"></u-navbar>
		<u-gap height="40"></u-gap>
		<u-image width="80" height="80" class="mx-[auto]" src="/static/logo.png"></u-image>
		<u-gap height="20"></u-gap>
		<u-text text="共赋人生" align="center" size="16" bold></u-text>
		<u-gap height="40"></u-gap>
		<u-form class="px-[16px]" ref="formRef" :model="formData" error-type="toast">
			<u-form-item :borderBottom="false" prop="userName">
				<u-input v-model="formData.userName" type="tel" clearable border="bottom" placeholder="请输入手机号"></u-input>
			</u-form-item>
			<u-form-item :borderBottom="false" prop="password" v-if="loginType == 1">
				<u-input v-model="formData.password" border="bottom" maxlength="15" clearable placeholder="请输入密码" type="password"></u-input>
			</u-form-item>
			<u-form-item :borderBottom="false" prop="code" v-else>
				<u-input v-model="formData.code" border="bottom" maxlength="6" clearable placeholder="请输入验证码" type="number"></u-input>
				<template #right>
					<text @click="getCode" class="text-[#d81e06]">{{tips}}</text>
				</template>
			</u-form-item>
		</u-form>
		<u-gap height="20"></u-gap>
		<view class="flex flex-row items-center justify-between">
			<u-text text="" :customStyle="{marginLeft:'16px'}" color="#999999" size="14"></u-text>
			<!-- <u-text @click="changeLoginType" :text="loginType == 1 ? '验证码登录' : '密码登录'" :customStyle="{marginLeft:'16px'}" color="#999999" size="14"></u-text> -->
			<u-text @click="toForget" text="忘记密码?" :customStyle="{marginRight:'16px'}" color="#999999" size="14"></u-text>
		</view>
		<u-gap height="20"></u-gap>
		<u-button @click="login" text="登录" shape="circle" size="large" color="#d81e06" :customStyle="{margin:'0 16px'}"></u-button>
	</view>
	<u-code :seconds="60" ref="uCodesLogin" @change="codeChange"></u-code>
</template>

<script setup>
	import { nextTick, ref, unref } from "vue";
	import * as api from "@/api.js";
	import {useUserStore} from "@/store/config.js";
	
	const store = useUserStore();
	
	const tips = ref('');
	const uCodesLogin = ref();
	const formRef = ref();
	const formData = ref({
		userName: '',
		password: '',
		code:''
	})
	
	const loginType = ref(1);//1是密码，2是验证码
	
	const login = async() => {
		if(!uni.$u.test.mobile(formData.value.userName)) {
			uni.showToast({
				icon:'none',
				title:'手机号码不正确'
			})
			return
		}
		if(unref(loginType) == 1) {
			if(!unref(formData).password) {
				uni.showToast({
					icon:'none',
					title:'密码不能为空'
				})
				return
			} else if(unref(formData).password.length < 6 || unref(formData).password.length > 15) {
				uni.showToast({
					icon:'none',
					title:'密码长度在6-15个字符之间'
				})
				return
			} else if(unref(formData).password.split(" ").length > 1) {
				uni.showToast({
					icon:'none',
					title:'密码不能包含空格'
				})
				return
			}
		} else {
			if(!unref(formData).code) {
				uni.showToast({
					icon:'none',
					title:'验证码不能为空'
				})
				return
			}
		}
		
		uni.showLoading();
		const result = loginType.value == 1 ? await api.login(formData.value.userName,formData.value.password) : await api.loginByCode(formData.value.userName,formData.value.code);
		uni.hideLoading();
		console.log(result)
		await nextTick();
		if(result[1]) {
			uni.showModal({
				content:result[1],
				showCancel:false
			})
		} else {
			console.log(store)
			store.user = result[0];
			store.save();
			uni.showToast({
				icon:'success',
				title:'登录成功'
			})
			await uni.$u.sleep(800);
			uni.navigateBack();
		}
	}
	
	const changeLoginType = () => {
		if(unref(loginType) == 1) {
			loginType.value = 2
			formData.value.password == ''
		} else {
			loginType.value = 1
			formData.value.code == ''
		}
	}

	const toRegister = () => {
		uni.navigateTo({
			url: `/pages/register/register`
		})
	}

	const toForget = () => {
		uni.showToast({
			icon:'none',
			title:'请联系平台客服'
		})
		/* uni.navigateTo({
			url: `/pages/forgetPwd/forgetPwd`
		}) */
	}
	
	const codeChange = e => {
		tips.value = e
	}
	
	const getCode = async () => {
		if (uCodesLogin.value.canGetCode) {
			// 模拟向后端请求验证码
			if(!uni.$u.test.mobile(unref(formData).userName)) {
				uni.showToast({
					icon:'none',
					title:'请填写正确的电话号码'
				})
				return
			}
			uni.showLoading({
				title: '正在获取验证码'
			})
			const result = await api.sendSms(unref(formData).userName,2);
			uni.hideLoading();
			if(result[1]) {
				await nextTick();
				uni.showToast({
					icon:'none',
					title:result[1]
				})
			} else {
				uCodesLogin.value.start();
			}
		}
	}
</script>

<style>
	page {
		background-color: #ffffff;
	}
</style>